<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :destroyOnClose="true"
    :footer="null"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">

      <div>
        <div  class="flex_column" style="float: left;color: red;">
          提示：先选择项目，找到需要修改经纬度的灯杆，拖动此灯杆，停止拖动后此灯杆经纬度会自动保存！
        </div>
        <!--center-->
        <div id="center">
          <!--引入百度地图-->
          <baidu-map
            ak="lhedb05t3bGeKtrCfYbpweXr"
            class="bm-view"
            :scroll-wheel-zoom="true"
            :center="baidumapcenter"
            :zoom="zoom"
            @ready="map_handler"
            @moving="syncCenterAndZoom"
            @moveend="syncCenterAndZoom"
            @zoomend="syncCenterAndZoom"
          >

            <bm-control anchor="BMAP_ANCHOR_TOP_LEFT">
              <div>
                <a-select placeholder="请选择项目" style="width: 200px" :value="projectListValue" @change="projectListChange" >
                  <a-select-option value="">请选择项目</a-select-option>
                  <a-select-option v-for="item in projectList" :key="item.id" :value="item.code">
                    {{item.name}}
                  </a-select-option>
                </a-select>

                <a-button type="primary" @click="setGps" icon="download">统一设置经纬度</a-button>

                <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 10}">
                  <input type="text" v-model="keyword" placeholder="请输入搜索关键字" class="serachinput" style="width: 200px;height: 29px;font-size: 14px;font-variant:tabular-nums;">
                </bm-auto-complete>

              </div>


            </bm-control>
            <bm-local-search  style="display: none" :auto-viewport="true" :keyword="keyword"></bm-local-search>

            <div
              v-for="(marker, i) of markersfilter"
              :key="i">

              <bm-marker
                :dragging="true"
                :icon="{url: marker.url, size: { width: 30, height: 30 }}"
                :position="{lng: marker.lng, lat: marker.lat}"
                @dragend="markerDragendCallback($event,marker.id)"
              >
                <bm-label
                  :content="marker.lightPole.code"
                  :offset="{width:-8,height:-18}"
                  :labelStyle="{border:'1px solid #6ea4cd', padding:'2px',fontWeight: '200',fontSize:'8px',cursor: 'pointer'}"
                  :title="marker.lightPole.code"
                />
              </bm-marker>

            </div>

          </baidu-map>

        </div>

      </div>

    </a-spin>


  </a-modal>

</template>
<script>
    import {httpAction} from '@/api/manage'
    import {GLR_ADDRESS_INFO} from "@/store/mutation-types"
    import { mapActions } from "vuex"
    import {
        BaiduMap,
        BmMarker,
        BmInfoWindow,
        BmMapType,
        BmlMarkerClusterer,
        BmControl,
        BmLabel,
        BmLocalSearch,
        BmAutoComplete,

    } from 'vue-baidu-map'
    export default {
        name: 'GlrLightPoleGis',
        components: {
            BaiduMap,
            BmlMarkerClusterer,
            BmMarker,
            BmInfoWindow,
            BmMapType,
            BmControl,
            BmLabel,
            BmLocalSearch,
            BmAutoComplete,
        },
        data() {
            return {
              title: "修改经纬度",
              width: 1000,
              visible: false,
              confirmLoading: false,

                ledcount:0,
                styleWidth:'{width:1px;}',
                sensorcount:0,
                radiocount:0,
                ligth_count:0,
                videocount:0,
                glrSensorData:{},
                keyword: '',
                sensor_list: [],
                title_list: [],
                cont_list: [],
                projectList:[],
                projectListValue:'',
                project:{},
                BMap: {},
                map: {},
                markers: [],
                markersfilter: [],
                baidumapcenter: {},
                baidumapcenter1: {},
                zoom: 18,
                curShow:0,
                mapStyle: {
                    styleJson: [
                        {
                            "featureType": "all",
                            "elementType": "geometry",
                            "stylers": {
                                "hue": "#007fff",
                                "saturation": 89
                            }
                        },
                        {
                            "featureType": "water",
                            "elementType": "all",
                            "stylers": {
                                "color": "#ffffff"
                            }
                        }
                    ]
                },
                firstValue: "",
                show: false,
                all_equipment:0,
                day_economy_electricity:0,
                sum_economy_electricity:0,
                power_avg:0,
                dateList:[],
                electricityList:[],
                avg_powerList:[],
                radioList:[],
                videoList:[],
                sensorWayList:[],
                gateWayList:[],
                lightList:[],
                ledList:[],
                glrLightPole:{},
                imgBase64:'',
                lng:'',
                lat:'',
                url: {
                    getLightPoleList: "/glr/glrLightPole/getLightPoleList",
                    getProjectList: "/glr/glrProject/getProject",
                    glrLightPoleUpdateLg: "/glr/glrLightPole/updateLg",
                    glrLightPoleUpdateLgAll: "/glr/glrLightPole/updateLgAll",
                },
            }
        },
        created() {
          var that=this;
          httpAction(that.url.getProjectList,{},"post").then((res)=>{
            if(res.success){
              that.projectList=res.result;
            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        },
        mounted() {
            this.getLightPoleList();
        },
        methods: {
          projectListChange(e) {
            const that = this;
            that.projectListValue=e;
            that.project={};
            for(var j = 0;j < that.projectList.length; j++){
              var lightPoleTemp=that.projectList[j];
              if (that.projectListValue==lightPoleTemp.code){
                that.project=that.projectList[j];

                that.markersfilter=[];
                for(var k = 0;k < that.markers.length; k++){
                  var marker=that.markers[k];
                  if (marker.lightPole.projectCode==that.projectListValue){
                    that.markersfilter.push(marker);
                  }
                }
                break;
              }
            }
            var that_baidumapcenter={lng: GLR_ADDRESS_INFO.longitude, lat: GLR_ADDRESS_INFO.latitude};
            var arr = Object.keys(that.project);
            if (arr.length>0){
              that_baidumapcenter={lng: parseFloat(that.project.longitude), lat: parseFloat(that.project.latitude)};
            }
            const point = new that.BMap.Point(that_baidumapcenter.lng, that_baidumapcenter.lat)
            //that.map.panTo(point)
            that.baidumapcenter1=that_baidumapcenter;
            that.map.centerAndZoom(point, 18);
          },
            curShowValue(value){
                this.curShow=value;
            },
          markerDragendCallback(event,id){
            const that = this;
            console.log("==lng=="+event.target.point.lng+"==lat=="+event.target.point.lat+"==")
            let httpurl = that.url.glrLightPoleUpdateLg;
            let method = 'post';
            let formData = {id:id,longitude:event.target.point.lng,latitude:event.target.point.lat};

            for(var k = 0;k < that.markers.length; k++){
              var marker=that.markers[k];
              if (marker.id==id){
                marker.lng=event.target.point.lng;
                marker.lat=event.target.point.lat;
                break;
              }
            }
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
            })
          },
            map_handler({BMap, map}) {
                this.BMap = BMap;
                this.map = map;
                map.addControl(new BMap.MapTypeControl({
                    mapTypes:[
                        BMAP_NORMAL_MAP,
                        BMAP_HYBRID_MAP
                    ]}));
              this.lng=GLR_ADDRESS_INFO.longitude;
              this.lat=GLR_ADDRESS_INFO.latitude;
                map.centerAndZoom(new BMap.Point(this.lng, this.lat, 18));
                map.setMapType(BMAP_HYBRID_MAP);
            },
            getLightPoleList(){
                var that=this;
                httpAction(that.url.getLightPoleList,{projectCode:''},"post").then((res)=>{
                    if(res.success){
                        that.lightPoleList=res.result;
                        that.lightPole={};
                        if (that.lightPoleList.length>0){
                            that.lng=that.lightPoleList[0].longitude;
                            that.lat=that.lightPoleList[0].latitude;
                        }
                        that.mapViewAllLightPole();
                    }else{
                        that.$message.warning(res.message);
                    }
                }).finally(() => {
                    that.confirmLoading = false;
                })
            },
          add() {
            this.edit();
          },
          //双向绑定经纬度以及缩放尺寸
          syncCenterAndZoom(e) {
            const { lng, lat } = e.target.getCenter();
            this.baidumapcenter1.lng = lng;
            this.baidumapcenter1.lat = lat;
            // this.zoom = e.target.getZoom();
          },
          setGps(){
            const that = this;
            if (that.projectListValue==""){
              that.$message.success("请先选择项目!");
            }else{
              that.$confirm({
                title: "确认",
                content: '确认修改此项目所有灯杆经纬度吗？',
                onOk: function () {
                  that.loading = true;
                  that.confirmLoading = true;
                  let httpurl =that.url.glrLightPoleUpdateLgAll;
                  httpAction(httpurl,{projectCode:that.projectListValue,longitude:that.baidumapcenter1.lng,latitude:that.baidumapcenter1.lat},"post").then((res)=>{
                    if(res.success){
                      that.$message.success(res.message);

                      for(var k = 0;k < that.markers.length; k++){
                        var marker=that.markers[k];
                        if (marker.lightPole.projectCode==that.projectListValue){
                          marker.lng=that.baidumapcenter1.lng;
                          marker.lat=that.baidumapcenter1.lat;
                        }
                      }

                      for(var k = 0;k < that.markersfilter.length; k++){
                        var marker=that.markersfilter[k];
                        if (marker.lightPole.projectCode==that.projectListValue){
                          marker.lng=that.baidumapcenter1.lng;
                          marker.lat=that.baidumapcenter1.lat;
                        }
                      }


                    }else{
                      that.$message.warning(res.message);
                    }
                  }).finally(() => {
                    that.confirmLoading = false;
                  })
                }
              });
            }
          },
          edit() {
            this.keyword="";
            this.visible = true;
            this.projectListValue="";
            this.markersfilter=[];
          },
          handleOk() {
            this.close()
          },
          handleCancel() {
            this.close()
          },
          close() {
            this.$emit('close');
            this.visible = false;
          },

            mapViewAllLightPole(){
                const that = this;
                if (that.lightPoleList.length>0){
                    that.lightPole=that.lightPoleList[0];
                    for(var j = 0;j < that.lightPoleList.length; j++){
                      //lamp_round
                      //hegan
                      //putong
                      //zhihui
                      var  url=null
                      if (that.lightPoleList[j].lightPoleType=='1'){
                        url=require("@/assets/gisMap/pic/putong.png");
                      }
                      if (that.lightPoleList[j].lightPoleType=='2'){
                        url=require("@/assets/gisMap/pic/zhihui.png");
                      }
                      if (that.lightPoleList[j].lightPoleType=='3'){
                        url=require("@/assets/gisMap/pic/hegan.png");
                      }
                      const position = { id:that.lightPoleList[j].id, lng: that.lightPoleList[j].longitude, lat: that.lightPoleList[j].latitude, url: url, showFlag: false,lightPole:that.lightPoleList[j] }

                      that.markers.push(position);
                    }

                    that.markersfilter=[];
                }
              that.lng=GLR_ADDRESS_INFO.longitude;
              that.lat=GLR_ADDRESS_INFO.latitude;
                that.baidumapcenter={lng: that.lng, lat: that.lat};
             //   const point = new that.BMap.Point(that.center.lng, that.center.lat)
             //   that.map.panTo(point)
            },
        },
    }
</script>
<style>
  .bm-view {
    width: 100%;
    height: 500px;
  }
  .serachinput {
    width: 300px;
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid #dddee1;
    line-height: 20px;
    font-size: 16px;
    height: 38px;
    color: #333;
    position: relative;
    border-radius: 4px;
    -webkit-box-shadow: #666 0px 0px 10px;
    -moz-box-shadow: #666 0px 0px 10px;
    box-shadow: #666 0px 0px 10px;
  }
</style>